<template>

<div class="">
  <div class="app-container homePage ">
      <div class="header">
        <div class="header-left fl" id="time">{{time(nowTime)}} {{weekTime(nowTime)}}</div>
        <div class="header-center fl"  @click="$router.push({name:'index'})">
            <div class="header-title">
                智能看板信息展示
            </div>
            <div class="header-img"></div>
        </div>
        <div class="header-right fl">
          <weather :weatherInfo='weatherInfo' ></weather>

        </div>
        <div class="header-bottom fl"></div>
    </div>
    <el-row :gutter="10" class="content">
        <el-col :span="6" class="leftBox">
          <!-- 浏览统计数据 -->
            <light-box>
              <div class="statisList">
                <div class="statisItem" v-for="(item,index) in statisList" :key="index">
                  <div class="num">{{item.num}}</div>
                  <div class="desc">{{item.name}}</div>
                </div>
              </div>
            </light-box>
            <!-- 用户访问日志 -->
            <light-box>
              <div class="tabs">
                  用户访问日志
              </div>
              <monitor class="monitor" :loginLog='logList'></monitor>
            </light-box>
            <!-- 平台访问率饼图 -->
            <light-box>
              <div class="tabs">
                  平台访问率
              </div>
              <div id="paasVisitPie" class="paasVisitPie" ></div>
            </light-box>
        </el-col>
        <el-col :span="12">
            <div id="myMapChart" :style="{width: '100%', height: '60vh'}"></div>
            <light-box>
              <div class="tabs">
                  用户分布统计
              </div>
              <div id="cityBar" class="cityBar" ></div>
            </light-box>
        </el-col>
        <el-col :span="6" class="rightBox">
          <!-- 文章分类饼图 -->
            <light-box>
              <div class="tabs">
                  文章分类
              </div>
              <div id="classifyPie" class="classifyPie" ></div>
            </light-box>
            <light-box>
              <div class="tabs">
                  访问统计
              </div>
              <div id="monthlyLine" class="monthlyLine" ></div>
            </light-box>
            <light-box>
              <div class="tabs">
                  文章浏览热榜
              </div>
              <ranking-list class="rankingList" :marqueeList='marqueeList'></ranking-list>
            </light-box>
        </el-col>
    </el-row>
  </div>
  <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
</div>

</template>

<script>
import { getDataScreen } from  '../api/common'
import { mapOption, classifyOption,cityBarOption,paasVisitPieOption,monthlyLineOption} from '../components/HomePage/chartsOption'
import htmlCanvas from '../utils/htmlCanvas'
import * as echarts from 'echarts'
import { time, weekTime } from '@/utils/tool'
import '../components/HomePage/china'
import lightBox from '../components/HomePage/lightBox.vue'
import monitor from '../components/HomePage/monitor.vue'
import RankingList from '../components/HomePage/rankingList'
import weather from '../components/HomePage/weather'
export default {
  components: { lightBox, monitor,RankingList,weather },
  name: 'homePage',
  data () {
    return {
      isSet1:true,
      myChartIndex:-1,
      startCharts:null,
      isSet2:true,
      myVisitPieChartIndex:-1,
      startVisitPieCharts:null,
      nowTime: new Date(),
      weatherInfo:[], // 天气信息
      statisList: [],// 统计数据
      logList: [],// 登录日志
      marqueeList:[], // 文章浏览排行榜
      mapOption: mapOption,// 地图
      classifyOption: classifyOption,// 文章分类饼图
      cityBarOption: cityBarOption,// 城市登录柱状图
      paasVisitPieOption:paasVisitPieOption, // 平台访问率饼图
      monthlyLineOption:monthlyLineOption // 月度访问折线图
    }
  },
  computed: {
    time () {
      return time
    },
    weekTime () {
      return weekTime
    }
  },
  mounted () {
    htmlCanvas()
    this.fetch()
  },
  methods: {
    async fetch () {
      // 根据id获取echats
      let myMapChart = this.$echarts.init(document.getElementById('myMapChart')) // 地图
      let myPaasVisitChart = this.$echarts.init(document.getElementById('paasVisitPie')) // 平台访问率饼图
      let myClassifyChart = this.$echarts.init(document.getElementById('classifyPie'))  // 文章分类饼图
      let myCityBar = this.$echarts.init(document.getElementById('cityBar')) // 城市登录柱状图
      let myMonthlyLine = this.$echarts.init(document.getElementById('monthlyLine')) // 月度访问折线图


      const {data} = await getDataScreen()
      console.log(data);
      // 访问量统计
      this.statisList = data.statis
      // 登录日志
      this.logList = data.userLoginLogList
      // 文章浏览排行榜
      this.marqueeList = data.rankingList
      // 天气信息
      this.weatherInfo = this.getIcon(data.weather.forecast,data.weather.city)
      // 实时时间
      const _this = this // 声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(() => {
        _this.nowTime = new Date() // 修改数据date
      }, 1000)

      // 地图
      this.mapOption.series[0].data = data.mapData
      myMapChart.setOption(this.mapOption)

      // 平台访问率饼图
      this.paasVisitPieOption.series[0].data = data.paasVisitPieData
      myPaasVisitChart.setOption(this.paasVisitPieOption)
      this.centralizerJS(myPaasVisitChart,this.paasVisitPieOption,this.startVisitPieCharts,this.myVisitPieChartIndex,this.isSet2)

      // 文章分类饼图
      this.classifyOption.series[0].data = data.classifyPieData
      myClassifyChart.setOption(this.classifyOption)
      this.centralizerJS(myClassifyChart,this.classifyOption,this.startCharts,this.myChartIndex,this.isSet1)

     // 城市登录柱状图
      this.cityBarOption.xAxis[0].data = data.regionalUsersBarData.xAxisData
      this.cityBarOption.series[0].data = data.regionalUsersBarData.seriesData
      myCityBar.setOption(this.cityBarOption)
      // 月度访问折线图
      this.monthlyLineOption.xAxis.data = data.monthlyLineData.xAxisData
      this.monthlyLineOption.series[0].data = data.monthlyLineData.predictData
      this.monthlyLineOption.series[1].data = data.monthlyLineData.seriesData
      myMonthlyLine.setOption(this.monthlyLineOption)
    },
    getIcon(arr,city){
      let newArr = JSON.parse(JSON.stringify(arr))
      newArr.forEach(el => {
        el.city = city
        if(el.type.indexOf('晴') !== -1){
          el.icon = 'iconfont icon-qingtian1'
        }else if(el.type.indexOf('多云') !== -1){
          el.icon = 'iconfont icon-duoyun'
        }else if(el.type.indexOf('雷阵雨') !== -1){
          el.icon = 'iconfont icon-leizhenyu1'
        }else if(el.type.indexOf('雨') !== -1 && el.type.indexOf('雷阵雨') === -1){
          el.icon = 'iconfont icon-yutian'
        }else if(el.type.indexOf('阴') !== -1){
          el.icon = 'iconfont icon-yintian1'
        }
      });

      return newArr
    },
    //饼图自动高亮
    centralizerJS(myChart,option,startCharts,myChartIndex,isSet) {
      clearInterval(startCharts);
      startCharts = setInterval(function () {
          chartHover(myChart,option);
      }, 2000)
      // 1.鼠标移入之后，取消自动高亮，显示当前高亮
      myChart.on('mouseover', function (param) {
        isSet = false
        clearInterval(startCharts)
        // console.log(param)
        // 取消之前高亮的图形
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: myChartIndex
        })
        myChartIndex=param.dataIndex;
        // 高亮当前图形
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
        })
      })
      // 2、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function () {
        // console.log(isSet)
        if (!isSet) {
            startCharts = setInterval(function () {
                chartHover(myChart,option);
            }, 2000)
            isSet = true;
        }
      })
      function chartHover(my,op) {
        let dataLen = op.series[0].data.length
        // console.log(dataLen)
        // 取消之前高亮的图形
        my.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: myChartIndex
        })
        myChartIndex= (myChartIndex + 1) % dataLen
        // console.log(myChartIndex)
        // 高亮当前图形
        my.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: myChartIndex
        })
        // 显示 tooltip
        my.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: myChartIndex,
        })

          // console.log(textData);
      }
    },

  },

  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  }
}
</script>

<style  lang="scss" scoped>
/*
头部*/
.header{
    width: 100%;
    height: 8vh;
    position: relative;
    /*background: red;*/
}
.header .header-left{
    width: 25%;
    height: 3.2rem;
    color: white;
    /*    border: 1px solid green;*/
    text-align: center;
    font-size: 1rem;
    line-height: 3.2rem;
}
.header .header-center{
    width: 50%;
    height: 3.7rem;
    z-index: 3;
    /*border: 1px solid red;*/
    /*    background: url("../images/head.gif") no-repeat;
        background-size: 100% 100%;*/
    position: relative;
}
.header .header-center .header-title{
    text-align: center;
    cursor: pointer;
    color: #ffffff;
    font-size: 1.5rem;
    text-shadow: 0 0 .9rem #00d8ff;
    line-height: 1.5rem;
}
.header .header-img{
    background: url("../assets/images/head.gif") no-repeat center center;
    background-size: 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 1rem;
}

.header .header-right{
    width: 25%;
    height: 3.05rem;
    /*border: 1px solid gold;*/
}
.header .header-bottom{
  // position: absolute;
  // top:.6rem;
    width: calc(100% - .4rem);
    height: .36rem;
    background: url("../assets/images/header.png") no-repeat;
    background-size: calc(100% - .6rem) 100%;
    padding: 0 .6rem;
    margin-left: .3rem;

}
.statisList{
  display: flex;
  height: 6vh;
  justify-content: space-between;
  color: #fff;
  text-align: center;
  .num{
    font-size: 20px;
    margin-bottom: 5px;
  }
  .desc{
    color: #4c9df9;
  }
  .desc::before{
     content:'';
    margin-right: 5px;
    border-radius: 3px;
    display: inline-block;
    width: 3px;
    height: 10px;
    background-color: #6acca3;
  }
}
.monitor{
  height: 32vh;
}
.tabs{
  color: #fff;
  top:.7rem;
  left: 3rem;
  font-size: .9rem;
  position: absolute;
}
.classifyPie{
  height: 20vh;
}
.paasVisitPie{
  height: 26vh;
}
.monthlyLine{
  height: 20vh;
}
.rankingList{
  height: 24vh;
}
.cityBar{
  height: 20vh;
}
.app-container{
    position: relative;
    .content{
        margin: 1rem auto;

    }
}
.homePage{
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    padding-top: 10px;
    z-index: 3;
}
.homePage::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    height: 100vh;
    width: 100vw;
    background:transparent url('../assets/images/echarts_bg.jpg') center center no-repeat;
    opacity: .6;
    filter:blur(2px);
    z-index:-1;
    background-size:cover;
}
.topTit{
    position: absolute;
    color: #fff;
    font-size: 2rem;
    left: 50%;
    transform: translateX(-50%);
}
.leftBox,
.rightBox{
}

</style>
